<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = "http://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <%@include file="common/head.jsp" %>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <header class="main-header">
        <!-- Logo -->
        <a href="javascript:void(0);" onclick="menuClick('s/dashboard')" class="logo">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"><b>M</b></span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg"><b>Monitor</b></span>
        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>

            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <li class="dropdown user user-menu">
                        <div class="btn-group" style="margin-top: 8px;margin-right: 10px;">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
                                    aria-expanded="false">
                                ${user.currentRoleName}
                                <span class="label label-warning">${roles.size()}</span>
                                <span class="caret"></span>
                                <%--<span class="sr-only">Toggle Dropdown</span>--%>
                            </button>
                            <ul class="dropdown-menu" role="menu" id="roleList">
                                <c:forEach items="${roles}" var="role">
                                    <li value="${role.id}"><a href="#">${role.name}</a></li>
                                </c:forEach>
                                <li class="divider"></li>
                                <li><a href="<%=path%>s/logout">退出</a></li>
                            </ul>
                        </div>
                    </li>

                </ul>
            </div>
        </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar user panel -->
            <div class="user-panel">
                <div class="pull-left image">
                    <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                </div>
                <div class="pull-left info">
                    <p style="margin: 10px;">${user.nickName}</p>
                    <%--<a href="#">管理员</a>--%>
                </div>
            </div>
            <!-- search form -->
            <form action="#" method="get" class="sidebar-form">
                <div class="input-group">
                    <input type="text" name="q" class="form-control" placeholder="Search...">
                    <span class="input-group-btn">
                    <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i
                            class="fa fa-search"></i>
                    </button>
                </span>
                </div>
            </form>
            <!-- /.search form -->
            <!-- sidebar menu: : style can be found in sidebar.less -->
            <ul class="sidebar-menu" data-widget="tree">
                <li class="header"></li>
                <c:forEach items="${menus}" var="menu">
                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-dashboard"></i>
                            <span>${menu.name}</span>
                            <span class="pull-right-container">
                                <i class="fa fa-angle-left pull-right"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">
                            <c:forEach items="${menu.childList}" var="child">
                                <li data-toggle="${child.url}"><a href="javascript:void(0);"><i
                                        class="fa fa-circle-o"></i> ${child.name}</a></li>
                            </c:forEach>
                        </ul>
                    </li>
                </c:forEach>


            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>
    <script src="<%=path%>bower_components/jquery/dist/jquery.min.js"></script>
    <%--<jsp:include page="/s/menu" flush="true"></jsp:include>--%>
    <div class="content-wrapper">
        <%--<div>--%>
        <iframe id="iframe-page-content" width="100%" frameborder="0" height="1" border="0" scrolling="no">

        </iframe>
    </div>
    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <b>Version</b> 1.0.0
        </div>
        <strong>Copyright &copy; 2018 <a href="https://www.yeepay.com">易宝支付</a>.</strong> All rights
        reserved.
    </footer>
</div>
<%@include file="common/footer.jsp" %>
</body>
<script type="text/javascript">
    var browserVersion = window.navigator.userAgent.toUpperCase();
    var isOpera = false, isFireFox = false, isChrome = false, isSafari = false, isIE = false;

    function reinitIframe(iframeId, minHeight) {
        try {
            var iframe = document.getElementById(iframeId);
            var bHeight = 0;
            if (isChrome == false && isSafari == false)
                bHeight = iframe.contentWindow.document.body.scrollHeight;
            var dHeight = 0;
            if (isFireFox == true)
                dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;
            else if (isIE == false && isOpera == false)
                dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
            else if (isIE == true && !-[1,] == false) {
            } //ie9+
            else
                bHeight += 3;

            var height = Math.max(bHeight, dHeight);
            if (height < minHeight) height = minHeight;
            iframe.style.height = height + "px";
        } catch (ex) {
        }
    }

    function startInit(iframeId, minHeight) {
        isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
        isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
        isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
        isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
        if (!!window.ActiveXObject || "ActiveXObject" in window)
            isIE = true;
        window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
    }

    startInit('iframe-page-content', 560);//开始调用

    var currentActive;
    $(function () {
        // startInit("iframe-page-content", 560);
        menuClick("s/dashboard");
    });
    var menuClick = function (menuUrl) {
        document.getElementById("iframe-page-content").style.height = "0px";
        // $("#iframe-page-content").removeAttr("src");
        $("#iframe-page-content").attr("src", "<%=path%>" + menuUrl);
        reinitIframe("iframe-page-content", 500);
    };

    $(".treeview-menu li").on("click", function () {
        $(currentActive).removeClass("active");
        $(currentActive).parents(".treeview").removeClass("active");
        $(this).attr("class", "active");
        $(this).parents(".treeview").addClass("active");
        currentActive = this;
        menuClick($(this).attr("data-toggle"));
    });

    $("#roleList li").on("click", function () {
        window.location.href = "<%=path%>/s/index?roleId=" + $(this).val()
    })

</script>
</html>
